<!DOCTYPE html>
<html>

	<head>
		<title>{$pageData.title}</title>
		<link rel="stylesheet" href="__STATIC__/home/js/layui/css/layui.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			img {
				border: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			ul li {
				list-style-type: none;
			}
			
			body {
				font-family: "微软雅黑";
				font-size: 14px;
				color: #a7a7a7;
				height: 100%;
			}
			
			.login-left {
				width: 60%;
				height: 100%;
				float: left;
				background-color: #2b2c35;
				position: relative;
			}
			
			.login-right {
				width: 40%;
				height: 100%;
				float: right;
				position: relative;
			}
			
			.login-left-ban {
				width: 700px;
				height: 500px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -250px;
				margin-left: -350px;
			}
			
			.login-right-cen {
				width: 500px;
				height: 500px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -250px;
				margin-left: -250px;
			}
			
			.login-logo,
			.login-from {
				padding: 0 50px;
			}
			
			.login-from ul li {
				position: relative;
				height: 38px;
				line-height: 38px;
				width: 260px;
				padding: 2px 18px 2px 32px;
				margin-bottom: 16px;
				border-bottom: 1px solid #e7e7e7;
			}
			
			.login-from .login-from-int {
				height: 24px;
				line-height: 24px;
				padding: 7px 0;
				width: 260px;
				color: #606060;
				border: 0 none;
				outline: none;
			}
			
			.login-short-but {
				width: 100px;
				position: absolute;
				right: 10px;
				height: 25px;
				color: #ffffff;
				background-color: #ffa300;
				border: none;
				top: 10px;
			}
			
			.login-from .login-but,
			.login-from .login-but01 {
				outline: none;
				width: 310px;
				height: 46px;
				line-height: 46px;
				margin-top: 20px;
				background: #ffa300;
				border-radius: 2px;
				color: #fff;
				border: 0 none;
				letter-spacing: 4px;
				font-size: 16px;
			}
			
			.login-from ul li label {
				position: absolute;
				left: 2px;
				top: 10px;
				width: 24px;
				height: 24px;
			}
			
			.login-from ul li label.loginListUser {
				background: url(__STATIC__/manage/images/yhicon.png) no-repeat;
				background-size: 24px 24px;
			}
			
			.login-from ul li label.loginListPwd {
				background: url(__STATIC__/manage/images/mmicon.png) no-repeat;
				background-size: 24px 24px;
			}
			
			.login-from ul li label.loginListYzm {
				background: url(__STATIC__/manage/images/yzmicon.png) no-repeat;
				background-size: 24px 24px;
			}
			
			.login-tab {
				width: 310px;
				height: 55px;
				position: relative;
				margin: 0 50px;
				margin-top: 50px;
			}
			
			.login-tab ul {
				position: absolute;
				top: -1px;
				left: 0;
				width: 100%;
				text-align: center;
				border-top: 1px solid #efefef
			}
			
			.login-tab ul li {
				width: 50%;
				height: 55px;
				float: left;
				line-height: 54px;
				cursor: pointer;
				border-top: 1px solid #efefef;
				position: relative;
			}
			
			.login-tab ul li.akt {
				border-top: 1px solid #ff8800;
				color: #ff8800;
			}
			
			#captcha {
				position: absolute;
				top: 0;
				right: 0;
				text-align: right;
			}
			
			#captcha img {
				width: 70%;
			}
		</style>
		<script type="text/javascript" src="__STATIC__/home/js/jquery.min.js"></script>
		<script type="text/javascript" src="__STATIC__/home/js/layui/layui.js"></script>
	</head>

	<body>
		<div class="login-left">
			<div class="login-left-ban">
				<a href="javascript:;">
					<img src="__STATIC__/manage/images/login-bj.png">
				</a>
			</div>

		</div>
		<div class="login-right">

			<div class="login-right-cen">

				<!--<div class="login-logo"><a href="javascript:;"><img src="/static/images/login-logo01.png"></a></div>-->
				<div class="login-tab">
					<ul class="clearfix">
						<li class="akt">账号登录</li>
					</ul>
				</div>
				<div class="login-from">
					<form class="layui-form">
						<ul>
							<li><label class="loginListUser"></label><input type="text" class="login-from-int login-name" name="loginname" placeholder="请输入账号"></li>
							<li><label class="loginListPwd"></label><input type="password" class="login-from-int login-pwd" name="password" placeholder="请输入密码"></li>
							<li><label class="loginListYzm"></label><input type="text" class="login-from-int login-pwd" name="captcha" placeholder="请输入验证码">
								<div id="captcha" onclick="refreshVerify()">{:captcha_img()}</div>
							</li>
						</ul>
						<p><input type="button" lay-submit="submit" lay-filter="loginSubmit" class="login-but" value="登录"></p>
					</form>
				</div>
			</div>

		</div>
		<script>
			
			
			
			function refreshVerify() {
				var ts = Date.parse(new Date()) / 1000;
				$('#captcha img').attr("src", "/captcha?id=" + ts);
			}
			var loginSrc = "{:url('index/login')}";
            
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer;
                 
                 
                //回车登录监听
                $(document).keyup(function(event){
				  if(event.keyCode ==13){
				  	var loginname=$(".login-from input[name=loginname]").val();
				  	var password=$(".login-from input[name=password]").val();
				  	var captcha=$(".login-from input[name=captcha]").val();
				  	var submitLoad = layer.load(1, {
						shade: [0.3, '#000000']
					});
				     $.ajax({
						type: 'post',
						dataType: 'json',
						data: {
							loginname:loginname,
							password:password,
							captcha:captcha
						},
						url: loginSrc,
						success: function(data) {
							var code = data.code;
							var msg = data.msg;
							if(code == 1) {
							  window.location.href="{:url('main/index')}"
							} else {
								layer.alert(msg, {
									icon: 5
								})
								layer.close(submitLoad)
							}
						}
					})
				    
				  }
				}); 
				
				
				
				form.on('submit(loginSubmit)', function(data) {
					var submitLoad = layer.load(1, {
						shade: [0.3, '#000000']
					});
					$.ajax({
						type: 'post',
						dataType: 'json',
						data: data.field,
						url: loginSrc,
						success: function(data) {
							var code = data.code;
							var msg = data.msg;
							if(code == 1) {
							  window.location.href="{:url('main/index')}"
							} else {
								layer.alert(msg, {
									icon: 5
								})
								layer.close(submitLoad)
							}
						}
					})
				});
			})
		</script>
	</body>

</html>